<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-06-16 10:08:09
 * @Descripttion: 用户确认
--> 
<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="企业名称">
            <el-input v-model="formInline.user" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="绑定状态">
            <el-select v-model="formInline.relation" placeholder="请选择绑定状态">
              <el-option
                v-for="item in relationList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据状态">
            <el-select v-model="formInline.status" placeholder="请选择数据状态">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜 索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="el-row-bottom-20">
      <el-col>
        <el-button type="primary" @click="altBindCustomerDialog">+ 绑定已有客户</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="企业名单"></el-table-column>
      <el-table-column prop="area" label="区域"></el-table-column>
      <el-table-column prop="code" label="统一社会信用代码"></el-table-column>
      <el-table-column prop="start" label="生效日期"></el-table-column>
      <el-table-column prop="end" label="失效日期"></el-table-column>
      <el-table-column prop="relation" label="绑定关系">
        <template slot-scope="scope">
          <span v-if="scope.row.relation == 1">绑定</span>
          <span v-if="scope.row.relation == 2">解绑</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="数据状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">等待电力用户确认</span>
          <span v-if="scope.row.status == 2">电力用户驳回</span>
          <span v-if="scope.row.status == 3">售电公司撤回</span>
          <span v-if="scope.row.status == 4">绑定生效中</span>
          <span v-if="scope.row.status == 5">等待售电公司确认</span>
          <span v-if="scope.row.status == 6">售电公司驳回</span>
          <span v-if="scope.row.status == 7">电力用户撤回</span>
          <span v-if="scope.row.status == 8">绑定解除</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="customerOperate(scope.row)">查看</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableTotal"
    ></el-pagination>
    <!-- 绑定已有客户 -->
    <el-dialog title="绑定已有客户" :visible.sync="customerDialogVisible">
      <el-dialog
        width="20%"
        title="客户绑定"
        :visible.sync="customerInnerVisible"
        append-to-body>
        <el-form :model="deviceForm" ref="deviceForm" label-width="110px">
          <el-form-item label="企业名称" prop="equipmentId" style='max-width: 300px'>
            <span>{{deviceForm.equipmentId}}</span>
          </el-form-item>
          <el-form-item label="生效日期" prop="startDate" style='max-width: 300px' :rules="[{ required: true, message: '请选择开始时间', trigger: 'blur'}]">
            <el-date-picker v-model="deviceForm.startDate" type="date" placeholder="请选择开始时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期" prop="endDate" style='max-width: 300px' :rules="[{ required: true, message: '请选择结束时间', trigger: 'blur'}]">
            <el-date-picker v-model="deviceForm.endDate" type="date" placeholder="请选择结束时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="委托代理协议" prop="affix" style='max-width: 300px' :rules="[{ required: true }]">
            <el-upload class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :file-list="fileList"
              :before-upload="beforeAvatarUpload">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传PDF文件，且不超过1M</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary">确 定</el-button>
        </div>
      </el-dialog>
      <el-row>
        <el-col>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="企业名称">
              <el-input v-model="formInline.user" placeholder="请输入企业名称"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码">
              <el-input v-model="formInline.user" placeholder="请输入统一社会信用代码"></el-input>
            </el-form-item>
            <el-form-item label="电压等级">
              <el-select v-model="formInline.status" placeholder="请选择电压等级">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">搜 索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table :data="customerDialogData">
        <el-table-column property="name" label="企业名称" width="200"></el-table-column>
        <el-table-column property="area" label="区域"></el-table-column>
        <el-table-column property="household" label="户号信息"></el-table-column>
        <el-table-column property="voltageLevel" label="电压等级"></el-table-column>
        <el-table-column property="code" label="统计社会信用代码"></el-table-column>
        <el-table-column property="status" label="绑定状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">绑定</span>
            <span v-if="scope.row.status == 2">解绑</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
            <el-button type="text" size="small" v-if="scope.row.status == 2" @click="altBindCustomerInnerDialog(scope.row)">绑定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 8px;"
        @size-change="customerSizeChange"
        @current-change="customerCurrentChange"
        :current-page.sync="customerPageIndex"
        :page-size="customerPageSize"
        layout="total, prev, pager, next"
        :total="customerDataTotal">
      </el-pagination>
    </el-dialog>
    <!-- 客户操作详情 -->
    <el-dialog
      width="20%"
      title="客户详情"
      :visible.sync="customerOperateVisible"
      append-to-body>
      <el-form :model="deviceForm" ref="deviceForm" label-width="110px">
        <el-form-item label="企业名称" prop="equipmentId" style='max-width: 300px'>
          <span>{{deviceForm.equipmentId}}</span>
        </el-form-item>
        <el-form-item label="生效日期" prop="startDate" :rules="[{ required: true, message: '请选择开始时间', trigger: 'blur'}]">
          <el-date-picker v-model="deviceForm.startDate" type="date" placeholder="请选择开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" prop="endDate" style='max-width: 270px' :rules="[{ required: true, message: '请选择结束时间', trigger: 'blur'}]">
          <el-date-picker v-model="deviceForm.endDate" type="date" placeholder="请选择结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="委托代理协议" prop="affix" style='max-width: 300px' :rules="[{ required: true }]">
          <el-upload class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="fileList"
            :before-upload="beforeAvatarUpload">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传PDF文件，且不超过1M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="解绑原因" style='max-width: 300px' :rules="[{ required: true }]">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入解绑原因" v-model="deviceForm.reason">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { separateObj } from '@/utils/index'

export default {
  data() {
    var validateExistFile = (rule, value, callback) => {
      let existFile = this.fileList.length < 1
      if (existFile) {
        callback(new Error("请上传委托代理协议"));
      } else {
        callback();
      }
    };
    return {
      relationList: [
        { value: 1, label: "绑定" },
        { value: 2, label: "解绑" }
      ],
      statusList: [
        { value: 1, label: "等待电力用户确认" },
        { value: 2, label: "电力用户驳回" },
        { value: 3, label: "售电公司撤回" },
        { value: 4, label: "绑定生效中" },
        { value: 5, label: "等待售电公司确认" },
        { value: 6, label: "售电公司驳回" },
        { value: 7, label: "电力用户撤回" },
        { value: 8, label: "绑定解除" }
      ],
      tableData: [
        {
          id: 1,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "1",
          status: "1",
          remark: ""
        },
        {
          id: 2,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "1",
          status: "2",
          remark: ""
        },
        {
          id: 3,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "1",
          status: "3",
          remark: ""
        },
        {
          id: 4,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "1",
          status: "4",
          remark: ""
        },
        {
          id: 5,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "2",
          status: "5",
          remark: ""
        },
        {
          id: 6,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "2",
          status: "6",
          remark: ""
        },
        {
          id: 7,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "2",
          status: "7",
          remark: ""
        },
        {
          id: 8,
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          code: "15687982659",
          start: "2020-02-01 00:00:00",
          end: "2020-12-31 23:59:59",
          relation: "2",
          status: "8",
          remark: ""
        }
      ],
      tableTotal: 102,
      pageIndex: 1,
      pageSize: 10,
      formInline: {
        user: "",
        relation: "",
        status: ""
      },
      customerDialogVisible: false,
      customerDialogData: [
        {
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          household: "2",
          voltageLevel: '10KV',
          code: '15687982659',
          status: 1
        },
        {
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          household: "1",
          voltageLevel: '20KV',
          code: '15687982659',
          status: 2
        },
        {
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          household: "2",
          voltageLevel: '30KV',
          code: '15687982659',
          status: 2
        },
        {
          name: "山西永新钢铁有限公司",
          area: "山西省太原市",
          household: "1",
          voltageLevel: '40KV',
          code: '15687982659',
          status: 1
        }
      ],
      customerDataTotal: 82,
      customerPageIndex: 1,
      customerPageSize: 10,
      customerInnerVisible: false,
      deviceForm:{
        equipmentId: '',
        defaultValue: '',
        equipmentNumber: '',
        reason: ''
      },
      fileList: [],
      customerOperateVisible: false
    };
  },
  methods: {
    search() {},
    altBindCustomerDialog() {
      this.customerDialogVisible = true;
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
    customerOperate(row){
      let newObj = separateObj(row)
      this.deviceForm.equipmentId = row.name
      this.customerOperateVisible = true;
    },
    customerSizeChange(val) {},
    customerCurrentChange(val) {},
    altBindCustomerInnerDialog(row) {
      let newObj = separateObj(row)
      this.deviceForm.equipmentId = row.name
      this.customerInnerVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      this.fileList = [{name: "aaa.pdf", url: "http://192.168.31.220:8061/files/aaa.pdf"}]
      if (file && file.status==="success") {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
      console.log('this.fileList')
      console.log(this.fileList)
    },
    // 上传前文件格式和大小限制
    beforeAvatarUpload(file) {
      const type = file.type === 'application/pdf'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!type) {
        this.$message.error('文件格式不正确!(只能包含PDF)')
      }
      if (!isLt2M) {
        this.$message.error('文件大小不能超过 1MB!')
      }
      return type && isLt2M
    }
  }
};
</script>
<style lang="scss">
.el-row-bottom-20 {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>